<template>
	<view class="uni-margin-wrap">
		<swiper indicator-color='#c1c1c1' indicator-active-color='#ffffff' :style="{height:swiperHeight+'rpx'}"
			class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item :style="{height:swiperHeight+'rpx'}" v-for="item,index in imagesList" :key="index">
				<cl-image :src="item">
					<text slot="error">图片地址错误</text>
				</cl-image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// background: ['color1', 'color2', 'color3'],
				// indicatorDots: true, //是否有指示点
				// autoplay: false, //是否自动播放
				// interval: 2200, //自动播放间隔时长(ms)
				// duration: 800, //幻灯片切换时长(ms)
			}
		},
		props: {
			//轮播图高度
			swiperHeight: {
				type: Number | String,
				default: () => '1000'
			},
			//是否自动播放
			autoplay: {
				type: Boolean,
				default: () => true
			},
			imagesList: {
				type: Array,
				default: () => {
					return ["http://rtk34k1n9.hd-bkt.clouddn.com/image/%E9%A6%96%E9%A1%B51.png", "http://rtk34k1n9.hd-bkt.clouddn.com/image/%E9%A6%96%E9%A1%B52.png"]
				}
			},
			//幻灯片切换时长(ms)
			duration:{
				type:Number | String,
				default:()=>'1000'
			},
			//自动播放间隔时长(ms)
			interval:{
				type:Number | String,
				default:()=>'3500'
			},
			//是否有指示点
			indicatorDots:{
				type:Boolean,
				default:()=>false
			}
		},
		methods: {

		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
